<template>
	<div class="anonymous">
		<TopBar :showName='showName' :BackgroundColor.sync="BackgroundColor"></TopBar>
		<div class="header" :style="{'padding-top':navigationbarHeight+'px','height':'600rpx'}">
			<image class="header-top-img" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousHeader.png" mode="widthFix"></image>
			<div class="btn-wrapper">
				<div class="btn" @click="show=true" v-if="isOwner==1">
					创建属于自己的主题
				</div>
			</div>
		</div>
		
		<!-- 列表 -->
		<div class="list" v-if="listData.length!=0">
			<div class="item" v-for="(item,index) of listData" :key='index' @click="toAnonymousDetail(item,index)">
				<div class="item-left">
					{{item.topic}}
				</div>
				<div class="item-right">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousS.png" mode="" @click.stop="toShareAnonymous(item)" class="delete"></image>
					<image v-if="isOwner==1" src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousD.png" mode="" @click.stop="delMyAnonymousMessageTopic(item,index)"  class="share"></image>
				</div>
				<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousL.png" mode="widthFix" class="logo"></image>
				<div class="dot dot-lot" v-show="item.new_number>99">99+</div>
				<div :class="{'dot':true,'dotD':item.new_number>9}" v-show="item.new_number && item.new_number<99">{{item.new_number}}</div>
			</div>
		</div>
		<!-- 列表end -->
		
		<div class="no-tips" v-if="listData.length==0">
			<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/noCollect.png" mode="widthFix"></image>
			<div>暂未创建主题</div>
		</div>
		
		<!-- 创建弹窗 -->
		<van-popup :show="show" position="center" close-on-click-overlay @close="show=false" round>
		    <div class="register-wrapper">
				<div class="header-popup">
					<image src="/static/img/delbtn-black.png" @click.stop="show=false"></image>
				</div>
				<div class="tit">创建主题</div>
				<!-- <div class="desc">请联系你的哔哔机友</div> -->
				<div class="input">
					 <textarea cursor-spacing="50px" @input="textareaChange" :value="topic" maxlength="50" auto-height placeholder="请输入主题,不超过50字"/>
				</div>
				<div class="tips">已输入{{topic.length}}</div>
				<div class="btn" @click="submit">提交</div>
			</div>
		</van-popup>
		<!-- 创建弹窗end -->
		<!--底部浮动栏-->
		<view class="bottom-fiex-content" v-if="isOwner==0">
			<view class="fiex-content-left">
				<img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/fiex-icon.png">
			</view>
			<view class="fiex-content-center">
				<p>哔哔机</p>
				<text>一个属于年轻人瞎哔哔的圈子</text>
			</view>
			<view class="fiex-content-right" @click="toHome">
				进圈
			</view>
		</view>
	</div>
</template>

<script>
	let defaultJpg=require('../../../static/img/quan-active.png');
	import TopBar from "@/pages/components/topBar/topBar";
	export default {
		components: {TopBar},
		data() {
			return {
				navigationbarHeight: getApp().globalData.navStyle.navigationbarHeight,
				isOwner:0,//是否是本人
				defaultJpg,
				show:false,
				topic:'',
				pageNum:1,
				listData:[],
				showName:'back',
				refreshFlag:false
			};
		},
		methods:{
			onpopup(){
			    if (this.show){
			        this.show = false;
					this.topic=''
			    } else {
			        this.show = true;
			    }
			
			},
			textareaChange(e){
				console.log(e)
				this.topic=e.detail.value
			},
			async submit(){
				let params={
					user_token:uni.getStorageSync('userToken'),
					topic:this.topic
				}
				let res=await this.$api.createAnonymousMessageTopic(params)
				if(res.data.level=='success'){
					this.show=false;
					this.listData.push(res.data.data)
					uni.showToast({
						icon:'none',
						title:res.data.message,
						duration:3000
					})
				}else{
						uni.showToast({
							icon:'none',
							title:res.data.message
						})
					}
				
			},
			async getMyAnonymousMessageTopic(){
				//获取我创建的匿名留言主题列表
				let params={
					user_token:uni.getStorageSync('userToken'),
					limit:10,
					page:this.pageNum,
					user_id:this.userId
				}
				let res=await this.$api.getMyAnonymousMessageTopic(params);
				
				if(res.data.level=='success'){
					this.listData=[...this.listData,...res.data.data.topic_info];
					this.isOwner=res.data.data.is_owner;
					console.log(this.isOwner,666)
				}
			},
			delMyAnonymousMessageTopic(item,index){
				//删除主题
				let _this=this
				uni.showModal({
					title:'删除主题？',
					success: function (res) {
						if (res.confirm) {
							_this.delMyAnonymousMessageTopicHandle(item,index)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete(){
						console.log('完成')
					}
				})
				
			},
			async delMyAnonymousMessageTopicHandle(item,index){
				let params={
					user_token:uni.getStorageSync('userToken'),
					id:item.id
				}
				let res=await this.$api.delMyAnonymousMessageTopic(params);
				if(res.data.level=='success'){
					this.listData.splice(index,1)
				}
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
			},
			toShareAnonymous(item){
				//跳转分享海报
				let content=item.topic;
				this.$bus.$data.topic=content;
				uni.navigateTo({
					url:`/pages/sharePost/shareAnonymous/shareAnonymous?topicId=${item.id}`
				})
			},
			toAnonymousDetail(item,index){
				if(item.new_number){
					//去除消息提示
					this.$set(this.listData,index,{...item,...{new_number:0}})
				}
				if(this.userId){
					//跳转他人的留言
					uni.navigateTo({
						url:`/pages/notice/anonymous/anonymousDetail/anonymousDetail?topicId=${item.id}`
					})
				}else{
					uni.navigateTo({
						url:`/pages/notice/anonymous/anonymousList/anonymousList?topicId=${item.id}`
					})
				}
				
			},
			toHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		},
		onLoad(options) {
			this.userId=options.userId||'';
			this.getMyAnonymousMessageTopic()
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.no-tips{
		@include flexWrap();
		background: #fff;
		margin-top:-100rpx;
		position: relative;
		z-index:-1;
		color:#6F7073;
		&>div{
			text-align: center;
			width: 100%;
		}
		}
	.anonymous{
		min-height: 100vh;
		.header{
			@include flexWrap();
			background-image: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/anonymousBg.png');
			width: 100%;
			height:550rpx;
			margin-bottom: 12rpx;
			.header-top-img{
				width: calc(100vw - 40rpx);
			}
		}
		.list{
			.item{
				position: relative;
				color:#fff;
				width: calc(100vw - 28rpx);
				height: 196rpx;
				.logo{
					position: absolute;
					top:0rpx;
					left: 0;
					width:132rpx;
					height: 132rpx;
				}
				margin:14rpx;
				/*padding:28rpx;*/
				border-radius: 20rpx;
				@include flex(space-between);
				&:nth-child(4n){
					background-color:#7595FF ;
				}
				&:nth-child(4n+1){
					background-color:#C06DFF ;
				}
				&:nth-child(4n+2){
					background-color:#FFAE59 ;
				}
				&:nth-child(4n+3){
					background-color:#38D48C ;
				}
				.item-left{
					flex:1;
					font-size: 34rpx;
					padding-left: 40rpx;
					font-weight: 600;
				}
				.item-right{
					width: 100rpx;
					height: 196rpx;
					background: rgba(0,0,0,0.05);
					image:first-child{
						margin:24rpx 28rpx 58rpx 28rpx;
					}
					image{
						display: block;
						margin:24rpx 28rpx;
						width: 44rpx;
						height: 44rpx;
					}
				}
				.dot{
					position: absolute;
					right:-30rpx;
					top:-30rpx;
					margin-top:20rpx;
					margin-right: 20px;
					text-align: center;
					background: #FF3A4C;
					color: #fff;
					width:30rpx;
					height: 30rpx;
					line-height: 30rpx;
					border-radius: 50%;
					font-size: 15rpx;
				}
				.dotD{
					font-size: 15rpx;
				}
				.dot-lot{
					width: auto !important;
					border-radius: 20rpx;
				}
			}
		}
		
		.btn-wrapper{
			width: 100%;
			/*margin:20rpx auto 40rpx;*/
			bottom: 0rpx;
			padding: 0rpx 0 60rpx 0;
			.btn{
				margin-left:60rpx;
				background: #FFE226;
				font-size:32rpx;
				text-align: center;
				font-weight: 600;
				border: 5rpx solid #000;
				width:calc(100vw - 120rpx);
				border-radius: 16rpx;
				/*height: 80rpx;*/
				line-height: 80rpx;
			}
		}
		
		.register-wrapper{
			width: 80vw;
			min-height: 500rpx;
			position: relative;
			.header-popup{
				image{
					width:40rpx;
					height: 40rpx;
				}
				margin:20rpx;
			}
			.tit{
				text-align: center;
				color:#292929;
				font-weight:600;
				font-size: 36rpx;
				line-height: 36rpx;
				
			}
			textarea{
				// padding:20rpx;
				margin: 20rpx;
				width: auto;
				box-sizing: border-box;
			}
			.desc{
				text-align: center;
				color:#6F7073;
				font-size:28rpx;
				line-height: 28rpx;
				margin:40rpx auto;
			}
			.tips{
				text-align: right;
				font-size: 20rpx;
				margin-top:40rpx;
				margin-right: 20rpx;
			}
			.btn{
				position: absolute;
				bottom: 30rpx;
				background: #FFE226;
				height:88rpx;
				text-align: center;
				font-weight: 600;
				font-size: 28rpx;
				line-height: 88rpx;
				width:calc(80vw - 300rpx) ;
				margin:60rpx 0 60rpx 150rpx ;
				background:rgba(255,226,38,1);
				border-radius:16rpx;
			}
			
		}
	}
	.bottom-fiex-content{
		position: fixed;
		width: calc(100vw - 60rpx);
		bottom: 0;
		left: 0;
		padding: 20rpx 30rpx;
		background: rgba(0,0,0,0.5);
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.fiex-content-left{
			width: 94rpx;
			height: 94rpx;
		}
		.fiex-content-center{
			color: #FFFFFF;
			padding: 0 20rpx;
			max-width: calc(100% - 218rpx);
			p{
				font-size: 32rpx;
				font-weight: bold;
				line-height: 44rpx;
				margin-bottom: 10rpx;
			}
			text{
				font-size: 24rpx;
			}
		}
		.fiex-content-right{
			margin-left: auto;
			width: 124rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: #FFE916;
			border: 4rpx solid #000000;
			font-size: 32rpx;
			border-radius: 16rpx;
		}
	}
</style>
